<template>
	<view class="forum_index">
		<!-- <ABannerTab :highLight="num" @sendNum="handleGet" :itemData="['关注','推荐','活动']"></ABannerTab> -->
		<ABanner :highLight="num" @sendNum="handleGet" :menuList="['关注','推荐','活动']"></ABanner>
		<view class="content">
			<view class="follow" v-if="num === 0">
				<AFollow :refresh="flag"></AFollow>
			</view>
			<view class="recommend" v-if="num === 1">
				<ARecommend :refresh="flag"></ARecommend>
				<view @click="toPost" class="blog_square">
					<p class="blog_square_card">+</p>
				</view>
			</view>
			<view class="recommend" v-if="num === 2">
				<Activity :refresh="flag"></Activity>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag: false,
				params: {
					list: {},
					total: 0
				},
				num: 1,
			}
		},
		onReachBottom() {
			uni.$emit('onBottom')
		},
		onPullDownRefresh() {
			this.flag = true
			setTimeout(() => {
				uni.stopPullDownRefresh();
				this.flag = false
			}, 1000);
		},
		methods: {
			handleGet(val) {
				this.num = val;
			},
			toPost(){
				uni.navigateTo({
					url:"/pages/forum/post/post"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		margin-top: -70rpx;
	}
	.forum_index {
		position: relative;
		width: 100%;
		background-color: #f1f1f2;

		.recommend {
			width: 100%;

		}
		.blog_square{
			position: fixed;
			display: flex;
			place-items: center;
			place-content: center;
			height: 80rpx;
			width: 80rpx;
			top: 1000rpx;
			border-radius: 50%;
			right: 10rpx;
			background-color: #fb6954;
			color: #fff;
			font-size:1.8rem;
			transition: box-shadow ease-in 0.1s;
		}
		.blog_square:active{
			box-shadow: 0 0px 15px red;;
		}

	}

	// .cards {
	// 	width: 100%;
	// 	display: flex;
	// 	justify-content: center;

	// 	.item {
	// 		flex-shrink: 0;
	// 		width: 100%;
	// 	}
	// }
</style>
